import textColorClass from "@/assets/ts/text_color_class"

type ItemCenterHeadProps = {
  label: string
  value: string | number
  bgClass: string
}

type DataSource = {
  a: string | number
  b: string | number
  c: string | number
  d: string | number
}

type OptionItem<T> = {
  label: string
  dataIndex: keyof T
  bgClass: string
}

const ItemCenterHead = ({ bgClass, label, value }: ItemCenterHeadProps) => {
  return <div className={`${bgClass} bg-no-repeat w-[205px] h-full bg-[rgba(24,144,255,.2)] pl-[84px] flex flex-col justify-center gap-[6px]  pb-[4px]`}>
    <div className={`${textColorClass.text_default} text-[22px] font-bold leading-[22px]`}>{value}</div>
    <div className={`${textColorClass.text_default} text-[12px] font-[400] leading-[12px]`}>{label}</div>
  </div>
}

const option: OptionItem<DataSource>[] = [
  {
    label: '攻击合计次数',
    dataIndex: 'a',
    bgClass: 'bg-[url(@/assets/svg/CenterHead-bg-1.svg)]',
  },
  {
    label: '暴露资产数量',
    dataIndex: 'b',
    bgClass: 'bg-[url(@/assets/svg/CenterHead-bg-2.svg)]',
  },
  {
    label: '已处置次数',
    dataIndex: 'c',
    bgClass: 'bg-[url(@/assets/svg/CenterHead-bg-3.svg)]',
  },
  {
    label: '发现漏洞数',
    dataIndex: 'd',
    bgClass: 'bg-[url(@/assets/svg/CenterHead-bg-4.svg)]',
  },
]
const data: DataSource = {
  a: 3456,
  b: 3456,
  c: 3456,
  d: 3456,
}
const CenterHead = () => {
  return <div className="h-[60px] flex gap-[46px]">

    {
      option.map(({ dataIndex, ...row }, index) => {
        return <ItemCenterHead {...row} key={index} value={data[dataIndex]} />
      })
    }

  </div>
}

export default CenterHead